<template>
  <div>
    <diagram ref="diag"
             :model-data="diagramData"
             style="height:400px"
             @model-changed="modelChanged"
             @add-item="handleAddItem"
             @changed-selection="changedSelection"/>
  </div>
</template>

<script>
import uuid from 'uuid/v4'
import Diagram from "../components/Diagram.vue"

export default {
  name: "Test",
  components: { Diagram },
  data () {
    return {
      diagramData: {
        nodeDataArray: [{
          "key": "562db998-d6bc-4a2b-9bcf-0db5698b858b",
          "data": { "bds": "calc('bds1')", "yslx": null, "bmc": null, "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "961ec0a2-9d5e-41a7-8154-6117b1bc1eb7",
          "data": { "bds": "calc('bds2')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "df20466c-9780-4041-ad2e-d2e7ce37f6fc",
          "data": { "bds": "calc('bds3')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "f61726d1-1219-4700-804a-c31ac5caaa94",
          "data": { "bds": "calc('bds4')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "112e97b7-4925-42d3-a9ce-85334e7915ef",
          "data": { "bds": "calc('bds5')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "3866c9d8-b19e-4a10-81c4-483b58d12103",
          "data": { "bds": "calc('bds6')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "120ce71f-cf96-487a-a331-a50140a94ddf",
          "data": { "bds": "calc('bds7')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "ee2d1f78-00df-48d7-bf9b-ecda3c084cac",
          "data": { "bds": "calc('bds8')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "59f55faa-e3e9-477b-a74e-d8aa30f608bd",
          "data": { "bds": "calc('bds9')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "99fcc3bf-a6cb-4a97-b5e3-bf14e7e38b03",
          "data": { "bds": "calc('bds10')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "ea629443-8130-411f-96f0-258187ff7c1c",
          "data": { "bds": "calc('bds11')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }, {
          "key": "fa9ea640-7a28-4008-a0c8-8b1bbaff5d0d",
          "data": { "bds": "calc('bds7')", "yslx": null, "bmc": "", "yes": [], "no": [] },
          "category": "decision",
        }],
        linkDataArray: [{
          "category": "auditedLineColor",
          "from": "562db998-d6bc-4a2b-9bcf-0db5698b858b",
          "fromport": "yes",
          "to": "961ec0a2-9d5e-41a7-8154-6117b1bc1eb7",
        }, {
          "category": "auditedLineColor",
          "from": "961ec0a2-9d5e-41a7-8154-6117b1bc1eb7",
          "fromport": "yes",
          "to": "df20466c-9780-4041-ad2e-d2e7ce37f6fc",
        }, {
          "category": "auditedLineColor",
          "from": "df20466c-9780-4041-ad2e-d2e7ce37f6fc",
          "fromport": "yes",
          "to": "f61726d1-1219-4700-804a-c31ac5caaa94",
        }, {
          "category": "auditedLineColor",
          "from": "f61726d1-1219-4700-804a-c31ac5caaa94",
          "fromport": "yes",
          "to": "112e97b7-4925-42d3-a9ce-85334e7915ef",
        }, {
          "category": "auditedLineColor",
          "from": "112e97b7-4925-42d3-a9ce-85334e7915ef",
          "fromport": "yes",
          "to": "3866c9d8-b19e-4a10-81c4-483b58d12103",
        }, {
          "category": "auditedLineColor",
          "from": "3866c9d8-b19e-4a10-81c4-483b58d12103",
          "fromport": "yes",
          "to": "120ce71f-cf96-487a-a331-a50140a94ddf",
        }, {
          "category": "auditedLineColor",
          "from": "120ce71f-cf96-487a-a331-a50140a94ddf",
          "fromport": "yes",
          "to": "ee2d1f78-00df-48d7-bf9b-ecda3c084cac",
        }, {
          "category": "auditedLineColor",
          "from": "ee2d1f78-00df-48d7-bf9b-ecda3c084cac",
          "fromport": "yes",
          "to": "59f55faa-e3e9-477b-a74e-d8aa30f608bd",
        }, {
          "category": "auditedLineColor",
          "from": "59f55faa-e3e9-477b-a74e-d8aa30f608bd",
          "fromport": "yes",
          "to": "99fcc3bf-a6cb-4a97-b5e3-bf14e7e38b03",
        }, {
          "category": "auditedLineColor",
          "from": "99fcc3bf-a6cb-4a97-b5e3-bf14e7e38b03",
          "fromport": "yes",
          "to": "ea629443-8130-411f-96f0-258187ff7c1c",
        }, {
          "category": "auditedLineColor",
          "from": "3866c9d8-b19e-4a10-81c4-483b58d12103",
          "fromport": "no",
          "to": "fa9ea640-7a28-4008-a0c8-8b1bbaff5d0d",
        }]
      },
      currentNode: null
    }
  },
  methods: {
    model () {
      return this.$refs.diag.model();
    },

    updateDiagramFromData () {
      this.$refs.diag.updateDiagramFromData();
    },

    modelChanged (e) {
    },

    changedSelection (e) {
      // var node = e.diagram.selection.first();
      // if (node instanceof go.Node) {
      //   this.currentNode = node;
      //   this.currentNodeText = node.data.data.bds;
      // } else {
      //   this.currentNode = null;
      //   this.currentNodeText = "";
      // }
    },
    handleAddItem (e, port) {
      let pnode = port.part.data
      if (!pnode.data.bds) return

      const { nodeDataArray, linkDataArray } = this.diagramData

      let newKey = uuid()
      nodeDataArray.push({
        key: newKey,
        data: { bds: "", yslx: null, bmc: "", yes: [], no: [] },
        category: "decision",
      });
      let link = {
        category: "auditedLineColor",
        fromport: port.portId,
        from: pnode.key,
        to: newKey
      };

      let num = linkDataArray.length - 1
      if (port.portId === 'yes') {
        num = -1
      }
      for (let i = linkDataArray.length - 1; i >= 0; i--) {
        let _link = linkDataArray[i]
        if (_link.from === pnode.key && _link.fromport === port.portId) {
          num = i;
          break
        }
      }
      linkDataArray.splice(num + 1, 0, link)
    },
  }
}
</script>

<style scoped>

</style>
